<template>
    <div class="addGateway">
        <div class="banner">
            <div class="flexItem">
                <span>网关上电，短按网关按钮，等待指示灯快闪</span>
            </div>
        </div>
        <div class="buttonList">
            <div class="flex" v-for="(item,index) in items">
                <div class="flexItem" @click="onGeneralClick('/addGatewayStep2',{})">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import {post, basePrefix, getCookie, getStorageObj} from "../../js/utils";
    import qs from 'qs';

    export default {
        name: 'AddGatewayStep1',
        components: {},
        computed: {
            ...mapState(["userId"]),
        },
        data () {
            return {
                step: this.$route.query.step,
                items: [{name: '下一步'}],
            }
        },
        created () {
        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                let jsApiTicket = JSON.parse(Base64.decode(getCookie("jsapiTicket")))
                let param = {
                    appId: jsApiTicket.AppId,
                }
                /*跳转外部浏览器之前，带上userId*/
                post("/user/GetWxUserIdForGatewayBind",{
                    userId:this.userId,
                }).then(
                    ret=>{
                        Object.assign(param,{link:encodeURIComponent('http://192.168.1.100/?wxUserId='+ret.userId),type: 'addGatewayStep2'})
                        window.location.href = window.location.href.split("?")[0] + '?' + qs.stringify(param) +  '#/addGatewayStep2'
                    }
                )
            }
        }
    }
</script>

<style scoped>
    .addGateway > .banner {
        width: 100vw;
        height: 50vh;
        background: url(../../assets/addGateway_01.png) no-repeat center top;
        background-size: 100% 100%;
        display: flex;
        justify-content: start;
    }

    .addGateway > .banner > .flexItem {
        align-self: flex-end;
        margin: 3.4vh;
    }

    /**
    按钮列表
     */
    .addGateway > .buttonList {
        width: 100vw;
        height: 50vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;
    }

    .addGateway > .buttonList > .flex {
        width: 100vw;
        display: flex;
        justify-content: center;
        line-height: 10vh;

    }

    .addGateway > .buttonList > .flex > .flexItem {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }
</style>
